<template>
  <div>

  <el-container>
    <el-aside style="width: 30%;margin-top: 20px">
      <el-row class="tac">
        <el-col :span="12">
          <h3>播放视频</h3>
          <el-menu
            default-active="2"
            @open="handleOpen"
            @close="handleClose">
            <el-submenu v-for="(chap,index) in chapterlist" :key="index" :index="index+''">
              <template slot="title">
                <i class="el-icon-s-management"></i>
                <span slot="title"> {{chap.chaptername}} </span>
              </template>
                <el-menu-item
                  @click.native="toSec(sec.url,index,cnt)"
                  v-for="(sec,cnt) in chap.seclist"
                  :key="cnt"
                  :index="index+'-'+cnt">
                  {{ sec.sessionname }}
                </el-menu-item>
              </el-submenu>

          </el-menu>
        </el-col>
      </el-row>
    </el-aside>
    <el-main>
      <video-player
      ref="videoPlayer"
      class="video-player vjs-custom-skin"
      :playsinline="true"
      :options="playerOptions"
      />
<!--      <el-col :span="20" style="height: 1000px;width: 1000px">-->
<!--        <el-divider direction="vertical"></el-divider>-->
<!--        <video-palyer-->
<!--          ref="videoPlayer"-->
<!--          class="video-player vjs-custom-skin"-->
<!--          :playsinline="true"-->
<!--          :options="playerOptions"-->
<!--        />-->
<!--      </el-col>-->
<!--      <div class="course-area"  >-->
<!--        <video-->
<!--          id="myVideo"-->
<!--          class="video-js"-->
<!--          style="width: 800px;height: 500px"-->

<!--        >-->
<!--          &lt;!&ndash;这里视频链接  &ndash;&gt;&lt;!&ndash;      src="http://vjs.zencdn.net/v/oceans.mp4"      "&ndash;&gt;-->
<!--          <source-->
<!--            src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"-->
<!--            type="video/mp4"-->
<!--          >-->
<!--        </video>-->
<!--      </div>-->
    </el-main>
  </el-container>

  </div>
</template>

<script>
  import 'video.js/dist/video-js.css'
  import 'vue-video-player/src/custom-theme.css'
    /* eslint-disable */
    export default {
        name: "playVideo",
        data() {
            return {
              playerOptions: {
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                autoplay: false, // 如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: "zh-CN",
                aspectRatio: "14:7", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                  {
                    type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                    src: "" // url地址
                  }
                ],
                hls: true,
                // poster: "", // 你的封面地址
                width: 100, // 播放器宽度
                height:100,
                notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                  timeDivider: true,
                  durationDisplay: true,
                  remainingTimeDisplay: false,
                  fullscreenToggle: true // 全屏按钮
                }
              },

              chapterlist:[],

              sessionlist:[{sessionname : "第一章"}],
              chaplist:[],
              x:0
            };
        },
        created() {
          this.getChapList();
            this.initVideo();


        },
        methods: {

            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            initVideo() {
                //初始化视频方法
                let myPlayer = this.$video(myVideo, {
                    //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
                    controls: true,
                    //自动播放属性,muted:静音播放
                    autoplay: "muted",
                    //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
                    preload: "auto",
                    //设置视频播放器的显示宽度（以像素为单位）
                    width: "800px",
                    //设置视频播放器的显示高度（以像素为单位）
                    height: "400px"
                });
            },
          //获取课程章节
          async getChapList() {
            let res = await this.$axios.post("getchaplist", {
                lessonid: window.sessionStorage.getItem('id')
            });
            
            console.log(res.data);
            for(var i = 0;i<res.data.length;i++){
              this.chapterlist.push( {
              chaptername : '',
              chapterid:0,
              seclist:[{
                sessionname:"",
                        url:''
                        }
                        ]
            })
              this.chapterlist[i].chaptername=res.data[i].chaptername;
              console.log(this.chapterlist[i].chaptername)
              this.chapterlist[i].chapterid=res.data[i].chapterid;
              console.log(this.chapterlist[i].chapterid)
              this.x=i
              console.log('x'+this.x)
              this.getchapsec(this.x)
            }
          },
          getchapsec(m) {
           console.log(this.chapterlist[this.x].chaptername)
            var _this = this
          this.$axios.post('/getchapsession', {
          chaptername:_this.chapterlist[this.x].chaptername,
          lessonid:window.sessionStorage.getItem('id')
          }).then(resp => {
           console.log(m)
            _this.chapterlist[m].seclist=resp.data,
             console.log( _this.chapterlist[m].seclist[0].sessionname)



        })
        },
          toSec(url, index, cnt) {
            console.log(url);
            this.playerOptions.sources[0].src = url;
            console.log(this.playerOptions.sources[0]);
            console.log(this.playerOptions.sources[0].src);
            console.log(index + " " + cnt);
            // this.chapname = this.chapterlist[index].chaptername;
            // this.secname = this.chapterlist[index].seclist[cnt].sessionname;
          }
        }
    }
</script>

<style scoped>
  .course-area {
    width: 890px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
  }
</style>
